import React, { useState } from 'react'
import { Button, CalendarPickerView, Card, Popup, ResultPage, Switch } from 'antd-mobile'
import { UndoOutline } from 'antd-mobile-icons'
import './home.css'
import { useNavigate } from 'react-router-dom'

import { useSelector } from 'react-redux'
import dayjs from 'dayjs'

function Home() {
    const nav = useNavigate()
    const counter = useSelector(state => state.counter);
    const [visible1, setVisible1] = useState(false)

    const start = (type) => {
        nav(`/type/${type}`)
    }
    return (
        <div>
            <ResultPage
                status=''
                title='火车票'
                description='边界购票,服务您的每一次出行'
            >
                <Card >
                    <div className='Card-top'>
                        <span className='Card-top-left' onClick={() => start('start')}>{counter.start}</span>
                        <span className='Card-top-center'><UndoOutline /></span>
                        <span className='Card-top-right' onClick={() => start('end')}>{counter.end}</span>
                    </div>

                    <div className='Card-bottom'>
                        <span className='Card-bottom-left' onClick={() => {
                            setVisible1(true)
                        }}>12月15日</span>
                    </div>

                    <div>
                        <span>只看高铁动车</span><Switch style={{ marginLeft: 'auto' }} />
                    </div>
                    <Button block color='primary' size='large' onClick={() => {
                        nav('/list')
                    }}>
                        搜索
                    </Button>




                </Card>

            </ResultPage>


            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '70vh' }}

            >
                <CalendarPickerView min={new Date()}
                    max={dayjs().add(14, 'day').toDate()}
                />
            </Popup>
        </div>
    )
}

export default Home